<template>
  <div
    class="page_body"
    v-loading.fullscreen.lock="loadingKey"
    :element-loading-text="loadingText"
  >
    <!-- 面包屑 -->
    <el-row>
      <el-col :span="24" class="page_box_top">
        <i class="el-icon-s-fold"></i>
        <el-breadcrumb separator="/" class="page_box_top_nav">
          <el-breadcrumb-item class="breadcrumb_active_item"
            >会员管理</el-breadcrumb-item
          >
          <el-breadcrumb-item>团体会员</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
      <div class="coachTrain_order_content">
        <!-- 搜索框 -->
        <el-row>
          <el-col :span="24">
            <div class="coachTrain_order_search">
              <el-input
                v-model="searchKey"
                placeholder="请输入关键词"
                style="width: 200px; margin-left: 10px"
                size="mini"
              ></el-input>
              <el-button
                type="primary"
                size="mini"
                style="margin-left: 5px"
                @click="searchFn()"
                >搜索</el-button
              >
            </div>
          </el-col>
        </el-row>
        <!-- 数据列表 -->
        <el-row
          type="flex"
          justify="center"
          v-if="orderListData != undefined && orderListData.length > 0"
        >
          <el-col :span="24">
            <el-table
              :data="orderListData"
              border
              style="width: 100%"
              size="mini"
              :cell-style="cellStyleFn"
            >
              <el-table-column
                type="index"
                label="序号"
                width="50"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="image_path" label="头像" width="100">
                <template #default="scope">
                  <el-avatar :src="scope.row.avatar" />
                </template>
              </el-table-column>
              <el-table-column
                prop="vip_number"
                label="证书编号"
                align="center"
                min-width="50"
              ></el-table-column>
              <el-table-column
                prop="company_name"
                label="公司名称"
                align="center"
                min-width="50"
              ></el-table-column>

              <el-table-column
                prop="company_simple_name"
                label="公司简称"
                width="160"
                align="center"
              ></el-table-column>

              <el-table-column
                prop="member_type_text"
                label="拟申请会员类别"
                width="160"
                align="center"
              ></el-table-column>

              <el-table-column
                prop="contact_phone"
                label="联系人电话"
                align="center"
                width="180"
              ></el-table-column>

              <el-table-column
                prop="audit_status"
                label="审核状态 "
                width="120"
                align="center"
                :formatter="formatterStatusFn"
              ></el-table-column>

              <el-table-column
                prop="address"
                label="邮寄地址"
                align="center"
                min-width="100"
              ></el-table-column>

              <el-table-column
                prop="is_new_text"
                label="是否为新会员"
                align="center"
                width="110"
              ></el-table-column>

              <el-table-column label="操作" min-width="100" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    @click="detailFn(scope.row)"
                    >查看</el-button
                  >
                  <el-button
                    size="mini"
                    type="primary"
                    @click="shenhe(scope.row)"
                    >审核</el-button
                  >
                  <el-button
                    size="mini"
                    type="primary"
                    @click="shangcuan(scope.row)"
                    >上传</el-button
                  >
                  <el-button
                    size="mini"
                    type="primary"
                    @click="setup(scope.row)"
                    >设置</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row
          type="flex"
          justify="center"
          v-if="orderListData != undefined && orderListData.length > 0"
        >
          <el-col :span="24">
            <div class="coachTrain_order_pagination">
              <el-pagination
                @size-change="listSizeChange"
                @current-change="listCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </el-col>
        </el-row>
        <el-row v-else>
          <el-empty description="暂无订单"></el-empty>
        </el-row>
      </div>
    </el-row>
    <el-dialog title="审核" :visible.sync="dialogVisible" width="30%">
      <div class="beizhu">
        <p>备注：</p>
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="textarea"
        >
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="nopass">不通过</el-button>
        <el-button type="primary" @click="poss">通过</el-button>
      </span>
    </el-dialog>
    <el-dialog title="上传" :visible.sync="dialogVsd" width="30%">
      <span slot="footer" class="dialog-footer">
        <el-form ref="dialogDetailForm" :model="detailFormData">
          <div class="divsds">
            <el-form-item label="图片" prop="area_icon" label-width="90px">
              <el-upload
                class="match_from_uploader"
                :data="uploadData"
                :action="actionUrl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :headers="headers"
              >
                <img :src="detailFormData.area_icon" class="avatar" />
              </el-upload>
            </el-form-item>
          </div>
        </el-form>
        <el-button @click="quxiao">取消</el-button>
        <el-button type="primary" @click="baocun">保存</el-button>
      </span>
    </el-dialog>
    <el-dialog title="设置" :visible.sync="dialogVsetup" width="30%">
      <div class="label_vip_number">
        <p>证件编号：</p>
        <el-input
          type="text"
          placeholder="请输入证件编号"
          v-model="dialog_vip_number"
          label="证件编号"
        >
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setupQuxiao">取消</el-button>
        <el-button type="primary" @click="setupBaocun">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style src="../../assets/css/order/coachTrainOrder.css" scoped></style>

<script>
export default {
  name: "CoachTrainOrder",
  components: {},
  data() {
    return {
      orderListData: [], // 订单列表数据
      currentPage: 1, // 当前页
      pageSizes: [10, 20, 50, 100], // 可选页容量
      pageSize: 10, // 当前页容量
      total: 0, // 总条数
      searchKey: "", //搜索关键词
      checkedLevel: "", // 筛选-等级
      levelList: [], // 等级列表
      orderStatusList: [
        {
          value: 1,
          label: "审核中",
        },
        {
          value: 2,
          label: "审核通过",
        },
        {
          value: 3,
          label: "待重新提交",
        },
      ],
      detailFormData: {
        area_icon: "", // 图标
      }, // 部门弹窗数据
      img: "",
      loadingKey: false,
      dialogVisible: false,
      dialogVsd: false,
      dialogVsetup: false,
      dialog_vip_number: "",
      loadingText: "",
      textarea: "",
      checkedOrderStatus: "", // 筛选-订单状态
      ids: "",
      uploadData: {
        source: 7,
      }, // 上传额外参数
      headers: {
        Authorization: this.$store.state.loginToken,
      }, // 上传用token
      actionUrl: this.$store.state.baseAPIUrl + "/upload/uploadFile", // 上传路径
    };
  },
  created: function () {
    this.getListDataFn();
  },
  methods: {
    // 搜索按钮
    searchFn: function () {
      this.currentPage = 1;
      this.getListDataFn();
    },
    // 等级筛选
    checkedLevelChange: function (val) {
      this.checkedLevel = val;
      this.getCheckedExamListFn();
    },
    // 订单状态筛选
    checkedOrderStatusChange: function (val) {
      this.checkedOrderStatus = val;
    },
    // 上传成功钩子
    handleAvatarSuccess: function (res, file) {
      console.log(file);
      this.detailFormData.area_icon = res.file_path;
      console.log(this.detailFormData.area_icon);

      this.$message.success("上传成功");
    },
    // 上传前钩子
    beforeAvatarUpload: function (file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 3;

      if (!isJPG && !isPNG) {
        this.$message.error("上传图片只能是 JPG/PNG 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 3MB!");
        return false;
      }
      return true;
    },
    // 查询列表数据
    getListDataFn: function () {
      let that = this;
      let url = "/admin/associationvip/index";
      let data = {
        keywords: this.searchKey,
        page: this.currentPage,
        perPage: this.pageSize,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            console.log(response);
            that.orderListData = response.list;
            that.total = response.total_count;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 设置单元格字体颜色
    cellStyleFn: function ({ row, columnIndex }) {
      let style = "";
      if (columnIndex == 7) {
        if (row.audit_status == 1 || row.audit_status == 3) {
          style = "color: #F6705E";
        } else {
          style = "color: #8ECF5F";
        }
      }
      return style;
    },
    // 订单状态格式化
    formatterStatusFn: function (row) {
      let orderStatus = row.audit_status;
      let text = "";
      this.orderStatusList.forEach(function (item) {
        if (item.value == orderStatus) {
          text = item.label;
        }
      });
      return text;
    },

    // 页容量改变
    listSizeChange: function (val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.getListDataFn();
    },
    // 当前页改变
    listCurrentChange: function (val) {
      this.currentPage = val;
      this.getListDataFn();
    },
    // 查看详情

    // 查看详情
    detailFn(row) {
      console.log(row);
      const routeUrl = this.$router.resolve({
        name: "groupFom",
      });
      window.open(routeUrl.href + "?id=" + row.id + "&key=1");
    },
    nopass() {
      //   console.log(row.id);
      let that = this;
      let url = "/admin/associationvip/audit";
      let data = {
        id: this.ids,
        audit_status: "3",
        audit_opinion: this.textarea,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            console.log(response);
            this.textarea = "";
            this.dialogVisible = false;

            this.getListDataFn();
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
      //
    },
    poss() {
      //   console.log(row.id);
      let that = this;
      let url = "/admin/associationvip/audit";
      let data = {
        id: this.ids,
        audit_status: "2",
        audit_opinion: this.textarea,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            console.log(response);
            this.textarea = "";
            this.dialogVisible = false;
            this.getListDataFn();
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
      //
    },
    //审核
    shenhe(row) {
      this.dialogVisible = true;
      console.log(row);
      this.ids = row.id;
    },
    shangcuan(row) {
      console.log(row.id);
      this.ids = row.id;
      this.dialogVsd = true;
    },
    quxiao() {
      this.dialogVsd = false;
    },
    baocun() {
      // this.dialogVsd = false;
      let that = this;
      let url = "/admin/associationvip/addCertificate";
      let data = {
        id: this.ids,
        certificate: this.detailFormData.area_icon,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            this.dialogVsd = false;
            this.getListDataFn();
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
      //
    },
    // 设置证件编号等信息
    setup(row) {
      this.dialogVsetup = true;
      console.log(row);
      this.ids = row.id;
      this.dialog_vip_number = row.vip_number;
    },
    // 取消设置
    setupQuxiao() {
      this.dialogVsetup = false;
    },
    // 保存设置
    setupBaocun() {
      let that = this;
      let url = "/admin/associationvip/modifyVipNumber";
      let data = {
        id: this.ids,
        vip_number: this.dialog_vip_number,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            this.dialogVsetup = false;
            this.getListDataFn();
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
      //
    },
  },
};
</script>
<style scoped>
.eds {
  width: 50px;
  height: 50px;
}
.beizhu {
  display: flex;
}
.beizhu >>> .el-textarea {
  width: 90%;
}
.label_vip_number {
  display: flex;
  justify-content: center;
  align-items: center;
}
.label_vip_number >>> .el-input {
  width: 80%;
}
.match_from_uploader >>> .el-upload {
  border: 1px dashed #999999;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.match_from_uploader >>> .el-upload:hover {
  border-color: #409eff;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}

.area_icon {
  width: 150px;
  height: 150px;
  display: block;
  margin: 0 auto;
}
.divsds {
  display: flex;
}
</style>
